import mapboxgl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import Popup from "@/components/Popup.vue";
import { ElButton, ElTable, ElTableColumn } from "element-plus";
import { createApp } from "vue";
import { getAreas } from "@/api/api";
import * as turf from "@turf/turf";
//初始化底图
export const initMap = async (controls,container) => {
  mapboxgl.accessToken = import.meta.env.VITE_TOKEN;
  const map = new mapboxgl.Map({
    container: container,
    style: "mapbox://styles/mapbox/streets-v12",
    center: [114.404, 30.478],
    zoom: 14.3,
    projection: "globe",
  });

  await map.once("style.load");
  map.doubleClickZoom.disable();
  const nav = new mapboxgl.NavigationControl({
    showCompass: true,
    showZoom: true,
  });
  controls.push(nav);
  map.addControl(nav, "bottom-left");
  return map;
};

//添加marker标注
export const createMarker = (map, data) => {
  const markers = [];
  data.length &&
    data.forEach((car) => {
      const div = document.createElement("div");
      const markerEle = createApp(Popup, { car });
      markerEle.use(ElButton);
      markerEle.use(ElTable);
      markerEle.use(ElTableColumn);
      markerEle.mount(div);
      const popup = new mapboxgl.Popup({
        closeOnClick: false,
      }).setDOMContent(div);
      const marker = new mapboxgl.Marker({})
        .setLngLat(car.coordinates)
        .setPopup(popup)
        .addTo(map);
      markers.push({ key: car.id, value: marker });
    });
  return markers;
};

//判断电动车的位置是否在规定区域内 isViolation 是否是违规
export const carIsInPolygon = async (carData, isViolation) => {
  //停放违规的数据
  const violationArr = [];
  //停放不违规的车的数据
  const noViolationArr = [];
  const areas = await getAreas();
  for (let i = 0; i < carData.length; i++) {
    let flag = false;
    const point = turf.point(carData[i].coordinates);
    for (let j = 0; j < areas.length; j++) {
      const polygon = turf.polygon(areas[j].coordinates);
      flag = turf.booleanPointInPolygon(point, polygon);
      if (flag) {
        break;
      }
    }
    //停放不违规
    if (flag) {
      noViolationArr.push(carData[i]);
      continue;
    }
    //停放违规
    violationArr.push(carData[i]);
  }
  //返回不违规的电车的数据
  if (!isViolation) {
    return noViolationArr;
  }
  return violationArr;
};

//床架一个画笔
export const createDarw = () => {
  return new MapboxDraw({
    displayControlsDefault: false,
  });
};

// 生成一个指定范围内的随机时间
export function getRandomDate(startDate, endDate) {
  // 将开始时间和结束时间转换为时间戳
  const startTimestamp = startDate.getTime();
  const endTimestamp = endDate.getTime();

  // 生成一个在开始时间和结束时间之间的随机时间戳
  const randomTimestamp =
    startTimestamp + Math.random() * (endTimestamp - startTimestamp);

  // 将随机时间戳转换为 Date 对象
  return new Date(randomTimestamp);
}

export function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}